<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>策略管理 - 币胜客pro</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="trading-modal.css">
  <style>
    /* 策略管理页面专用样式 */
    .strategy-container {
      min-height: 100vh;
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      padding: 20px;
    }
    
    .strategy-content-wrapper {
      margin-top: 80px;
    }
    
    .strategy-header {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 30px;
      margin-bottom: 30px;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .strategy-title {
      font-size: 2.5rem;
      font-weight: 700;
      color: white;
      margin: 0 0 10px 0;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .strategy-subtitle {
      font-size: 1.1rem;
      color: rgba(255, 255, 255, 0.8);
      margin: 0;
    }
    
    .strategy-content {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 30px;
      margin-bottom: 30px;
    }
    
    .strategy-section {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 15px;
      padding: 25px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .section-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: #1f2937;
      margin: 0 0 20px 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .section-icon {
      font-size: 1.8rem;
    }
    
    .back-btn {
      position: fixed;
      top: 20px;
      left: 20px;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: white;
      padding: 12px 20px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.3s ease;
      z-index: 1000;
    }
    
    .back-btn:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-2px);
    }
    
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 15px;
      margin-bottom: 20px;
    }
    
    .stat-card {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 12px;
      padding: 16px;
      text-align: center;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .stat-value {
      font-size: 1.8rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 6px;
    }
    
    .stat-label {
      font-size: 0.85rem;
      color: #6b7280;
      font-weight: 500;
    }
    
    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    
    .btn-primary {
      background: #f59e0b;
      color: white;
    }
    
    .btn-primary:hover {
      background: #d97706;
      transform: translateY(-1px);
    }
    
    .btn-secondary {
      background: #6b7280;
      color: white;
    }
    
    .btn-secondary:hover {
      background: #4b5563;
    }
    
    .btn-success {
      background: #10b981;
      color: white;
    }
    
    .btn-success:hover {
      background: #059669;
    }
    
    .btn-danger {
      background: #ef4444;
      color: white;
    }
    
    .btn-danger:hover {
      background: #dc2626;
    }
    
    .btn-group {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    
    .filter-bar {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    
    .filter-input {
      padding: 8px 12px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 14px;
      min-width: 120px;
    }
    
    .filter-input:focus {
      outline: none;
      border-color: #f59e0b;
    }
    
    .strategy-list {
      max-height: 500px;
      overflow-y: auto;
    }
    
    .strategy-item {
      background: #f9fafb;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 12px;
      transition: all 0.3s ease;
    }
    
    .strategy-item:hover {
      background: #f3f4f6;
      border-color: #d1d5db;
    }
    
    .strategy-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .strategy-title {
      font-weight: 600;
      color: #1f2937;
      font-size: 1.1rem;
    }
    
    .strategy-status {
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
    }
    
    .status-active {
      background: #d1fae5;
      color: #065f46;
    }
    
    .status-paused {
      background: #fef3c7;
      color: #92400e;
    }
    
    .strategy-details {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 8px;
      font-size: 12px;
      color: #6b7280;
      margin-bottom: 12px;
    }
    
    .strategy-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    
    .strategy-actions .btn {
      padding: 6px 12px;
      font-size: 12px;
    }
    
    .loading {
      text-align: center;
      padding: 40px;
      color: #6b7280;
    }
    
    .error {
      background: #fee2e2;
      color: #991b1b;
      padding: 12px;
      border-radius: 8px;
      margin: 10px 0;
    }
    
    .success {
      background: #d1fae5;
      color: #065f46;
      padding: 12px;
      border-radius: 8px;
      margin: 10px 0;
    }
    
    .pager-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      padding: 10px 0;
    }
    
    .pager-info {
      color: #6b7280;
      font-size: 14px;
    }
    
    .pager-controls {
      display: flex;
      gap: 8px;
    }
    
    .pager-controls .btn {
      padding: 6px 12px;
      font-size: 12px;
    }
    
      .pager-controls .btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      
      /* 表单样式 */
      .field {
        margin-bottom: 15px;
      }
      
      .field label {
        display: block;
        margin-bottom: 5px;
        color: #374151;
        font-weight: 500;
      }
      
      .input {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 14px;
        transition: border-color 0.3s ease;
        background-color: white;
        color: #1f2937;
        box-sizing: border-box;
      }
      
      .input:focus {
        outline: none;
        border-color: #f59e0b;
      }
      
      .form-msg {
        margin: 10px 0;
        padding: 10px;
        border-radius: 4px;
        font-size: 14px;
      }
      
      /* 策略表单专用输入框样式 - 最高优先级 */
      .strategy-form-input {
        background-color: white !important;
        color: #1f2937 !important;
        border: 2px solid #d1d5db !important;
        cursor: text !important;
        pointer-events: auto !important;
        user-select: text !important;
        -webkit-user-select: text !important;
        -moz-user-select: text !important;
        -ms-user-select: text !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        width: 100% !important;
        padding: 8px 12px !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
      }
      
      .strategy-form-input:focus {
        border-color: #f59e0b !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
      }
      
      .strategy-form-input[type="text"] {
        cursor: text !important;
      }
      
      .strategy-form-input[type="select"] {
        cursor: pointer !important;
      }
    
    @media (max-width: 768px) {
      .strategy-content {
        grid-template-columns: 1fr;
      }
      
      .strategy-title {
        font-size: 2rem;
      }
      
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .filter-bar {
        flex-direction: column;
      }
      
      .filter-input {
        min-width: auto;
      }
    }
  </style>
</head>
<body>
  <a href="admin.html" class="back-btn">← 返回管理台</a>
  
  <div class="strategy-container">
    <div class="strategy-content-wrapper">
      <!-- 页面头部 -->
      <div class="strategy-header">
        <h1 class="strategy-title">⚙️ 策略管理</h1>
        <p class="strategy-subtitle">管理系统策略、创建新策略和查看策略详情</p>
      </div>
      
      <!-- 主要内容区域 -->
    <div class="strategy-content">
      <!-- 策略统计 -->
      <div class="strategy-section">
        <h2 class="section-title">
          <span class="section-icon">📊</span>
          策略统计
        </h2>
        
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-value" id="total-strategies">-</div>
            <div class="stat-label">总策略数</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" id="active-strategies">-</div>
            <div class="stat-label">活跃策略</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" id="paused-strategies">-</div>
            <div class="stat-label">暂停策略</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" id="total-symbols">-</div>
            <div class="stat-label">交易符号数</div>
          </div>
        </div>
        
        <div class="btn-group">
          <button class="btn btn-secondary" onclick="loadStrategyStats()">
            🔄 刷新统计
          </button>
        </div>
      </div>
      
      <!-- 策略列表 -->
      <div class="strategy-section">
        <h2 class="section-title">
          <span class="section-icon">📋</span>
          策略列表
        </h2>
        
        <div class="btn-group">
          <button class="btn btn-primary" onclick="openCreateStrategyModal()">
            ➕ 创建策略
          </button>
          <button class="btn btn-secondary" onclick="loadStrategyList()">
            🔄 刷新列表
          </button>
        </div>
        
        <!-- 筛选栏 -->
        <div class="filter-bar">
          <input type="text" id="filter-name" class="filter-input" placeholder="按名称筛选" oninput="filterStrategies()">
          <input type="text" id="filter-symbol" class="filter-input" placeholder="按符号筛选" oninput="filterStrategies()">
          <select id="filter-market" class="filter-input" onchange="filterStrategies()">
            <option value="">市场类型</option>
            <option value="spot">现货</option>
            <option value="perpetual">合约</option>
          </select>
          <select id="filter-status" class="filter-input" onchange="filterStrategies()">
            <option value="">状态</option>
            <option value="active">启用</option>
            <option value="paused">暂停</option>
          </select>
          <select id="filter-order" class="filter-input" onchange="filterStrategies()">
            <option value="desc">创建时间：降序</option>
            <option value="asc">创建时间：升序</option>
          </select>
        </div>
        
        <div id="strategy-list-content" class="strategy-list">
          <div class="loading">加载中...</div>
        </div>
        
        <!-- 分页器 -->
        <div id="strategy-pager-bar" class="pager-bar">
          <!-- 分页器内容将在这里动态生成 -->
        </div>
      </div>
    </div>
    </div>
  </div>
  
  <!-- 创建/编辑策略弹窗 -->
  <div class="modal" id="strategy-form-modal" style="display: none;">
    <div class="modal-backdrop" id="strategy-form-backdrop"></div>
    <div class="modal-content" id="strategy-form-content-wrapper">
      <div class="modal-header">
        <div class="modal-icon">➕</div>
        <div>
          <h2 class="modal-title" id="strategy-form-title">创建策略</h2>
          <p class="modal-subtitle" id="strategy-form-subtitle">创建新的交易策略</p>
        </div>
        <button class="modal-close" id="strategy-form-close-btn">&times;</button>
      </div>
      
      <div class="modal-body">
        <div id="strategy-form-content">
          <!-- 表单内容将在这里动态生成 -->
        </div>
      </div>
    </div>
  </div>
  
  <script src="admin.js"></script>
  <script>
    // 策略管理页面状态
    var strategyState = { 
      page: 1, 
      page_size: 10, 
      name: '', 
      symbol: '', 
      market_type: '', 
      status: '', 
      order: 'desc' 
    };
    
    var STRATEGY_FORM_SENTINEL = '__unset__';
    
    function lockStrategyFormParent(modal) {
      if (!modal) return;
      var parentModal = document.getElementById('strategy-manager-modal');
      if (!parentModal || parentModal.style.display === 'none') return;
      modal.dataset.parentModalId = parentModal.id;
      modal.dataset.prevParentPointer =
        parentModal.style.pointerEvents && parentModal.style.pointerEvents.length
          ? parentModal.style.pointerEvents
          : STRATEGY_FORM_SENTINEL;
      modal.dataset.prevParentZIndex =
        parentModal.style.zIndex && parentModal.style.zIndex.length
          ? parentModal.style.zIndex
          : STRATEGY_FORM_SENTINEL;
      parentModal.style.pointerEvents = 'none';
      parentModal.style.zIndex = '1000';
    }
    
    function unlockStrategyFormParent(modal) {
      if (!modal) return;
      var parentId = modal.dataset.parentModalId;
      if (!parentId) return;
      var parentModal = document.getElementById(parentId);
      if (parentModal) {
        var prevPointer = modal.dataset.prevParentPointer;
        if (prevPointer && prevPointer !== STRATEGY_FORM_SENTINEL) {
          parentModal.style.pointerEvents = prevPointer;
        } else {
          parentModal.style.removeProperty('pointer-events');
        }
        var prevZ = modal.dataset.prevParentZIndex;
        if (prevZ && prevZ !== STRATEGY_FORM_SENTINEL) {
          parentModal.style.zIndex = prevZ;
        } else {
          parentModal.style.removeProperty('z-index');
        }
      }
      delete modal.dataset.parentModalId;
      delete modal.dataset.prevParentPointer;
      delete modal.dataset.prevParentZIndex;
    }
    
    function elevateStrategyForm(modal) {
      if (!modal) return;
      modal.dataset.prevZIndex =
        modal.style.zIndex && modal.style.zIndex.length
          ? modal.style.zIndex
          : STRATEGY_FORM_SENTINEL;
      modal.style.zIndex = '1100';
    }
    
    function resetStrategyFormZ(modal) {
      if (!modal) return;
      var prevZ = modal.dataset.prevZIndex;
      if (prevZ && prevZ !== STRATEGY_FORM_SENTINEL) {
        modal.style.zIndex = prevZ;
      } else if (prevZ !== undefined) {
        modal.style.removeProperty('z-index');
      }
      delete modal.dataset.prevZIndex;
    }
    
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      console.log('策略管理页面已加载');
      
      // 加载策略统计
      loadStrategyStats();
      
      // 加载策略列表
      loadStrategyList();
    });
    
    // 筛选策略
    function filterStrategies() {
      strategyState.name = document.getElementById('filter-name').value.trim();
      strategyState.symbol = document.getElementById('filter-symbol').value.trim();
      strategyState.market_type = document.getElementById('filter-market').value;
      strategyState.status = document.getElementById('filter-status').value;
      strategyState.order = document.getElementById('filter-order').value;
      strategyState.page = 1;
      
      loadStrategyList();
    }
    
    // 打开创建策略页
    function openCreateStrategyModal() {
      window.location.href = 'strategy-create.html';
    }

    // 关闭策略表单
    function closeStrategyForm() {
      var modal = document.getElementById('strategy-form-modal');
      if (modal) {
        resetStrategyFormZ(modal);
        unlockStrategyFormParent(modal);
        modal.style.display = 'none';
      }
    }
    
    // 保存策略
    async function saveStrategy() {
      console.log('保存策略');
      
      var nameInput = document.getElementById('strategy-name');
      var symbolInput = document.getElementById('strategy-symbol');
      var marketInput = document.getElementById('strategy-market');
      var msgEl = document.getElementById('strategy-form-msg');
      
      if (!nameInput || !symbolInput || !marketInput || !msgEl) {
        console.error('表单元素未找到');
        return;
      }
      
      var name = nameInput.value.trim();
      var symbol = symbolInput.value.trim();
      var market = marketInput.value || 'spot';
      
      if (!name || !symbol) {
        msgEl.textContent = '请填写策略名称和交易符号';
        msgEl.style.background = '#fee2e2';
        msgEl.style.color = '#991b1b';
        return;
      }
      
      msgEl.textContent = '提交中...';
      msgEl.style.background = '#fef3c7';
      msgEl.style.color = '#92400e';
      
      try {
        var payload = {
          name: name,
          symbol: symbol,
          market_type: market
        };
        
        console.log('创建策略数据:', payload);
        
        // 调用创建策略API
        var response = await request('POST', '/scripts', payload, true);
        var result = await response.json();
        
        console.log('创建策略API响应:', result);
        
        if (response.ok) {
          msgEl.textContent = '策略创建成功！';
          msgEl.style.background = '#d1fae5';
          msgEl.style.color = '#065f46';
          
          // 关闭表单
          setTimeout(function() {
            closeStrategyForm();
            // 刷新列表和统计
            loadStrategyList();
            loadStrategyStats();
          }, 1500);
          
        } else {
          throw new Error(result.message || result.detail || '创建策略失败');
        }
      } catch (err) {
        console.error('保存策略失败:', err);
        msgEl.textContent = '保存失败: ' + err.message;
        msgEl.style.background = '#fee2e2';
        msgEl.style.color = '#991b1b';
      }
    }
    
    // 测试输入框功能
    function testInputFields() {
      console.log('=== 测试输入框功能 ===');
      
      var nameInput = document.getElementById('strategy-name');
      var symbolInput = document.getElementById('strategy-symbol');
      var marketSelect = document.getElementById('strategy-market');
      
      if (!nameInput || !symbolInput || !marketSelect) {
        console.error('输入框未找到，请先打开创建策略表单');
        return;
      }
      
      console.log('输入框状态检查:');
      console.log('策略名称输入框:', {
        element: nameInput,
        disabled: nameInput.disabled,
        readOnly: nameInput.readOnly,
        value: nameInput.value,
        style: nameInput.style.cssText
      });
      
      console.log('交易符号输入框:', {
        element: symbolInput,
        disabled: symbolInput.disabled,
        readOnly: symbolInput.readOnly,
        value: symbolInput.value,
        style: symbolInput.style.cssText
      });
      
      // 强制设置可编辑状态
      nameInput.disabled = false;
      nameInput.readOnly = false;
      nameInput.style.pointerEvents = 'auto';
      nameInput.style.userSelect = 'text';
      nameInput.style.backgroundColor = 'white';
      nameInput.style.color = '#1f2937';
      nameInput.style.cursor = 'text';
      
      symbolInput.disabled = false;
      symbolInput.readOnly = false;
      symbolInput.style.pointerEvents = 'auto';
      symbolInput.style.userSelect = 'text';
      symbolInput.style.backgroundColor = 'white';
      symbolInput.style.color = '#1f2937';
      symbolInput.style.cursor = 'text';
      
      // 测试设置值
      nameInput.value = '测试策略';
      symbolInput.value = 'BTC-USDT';
      marketSelect.value = 'spot';
      
      console.log('设置测试值后:');
      console.log('策略名称:', nameInput.value);
      console.log('交易符号:', symbolInput.value);
      console.log('市场类型:', marketSelect.value);
      
      // 测试焦点
      nameInput.focus();
      nameInput.select();
      
      console.log('=== 测试完成 ===');
      console.log('如果输入框可以正常工作，您应该能够:');
      console.log('1. 看到输入框获得焦点');
      console.log('2. 看到文字被选中');
      console.log('3. 可以手动输入文字');
      
      return {
        nameInput: nameInput,
        symbolInput: symbolInput,
        canEdit: !nameInput.disabled && !nameInput.readOnly
      };
    }
    
    // 全局测试函数
    window.testStrategyInputs = testInputFields;
    
    // 简单的输入框测试函数
    window.testInputs = function() {
      var nameInput = document.getElementById('strategy-name');
      var symbolInput = document.getElementById('strategy-symbol');
      
      if (!nameInput || !symbolInput) {
        console.log('请先打开创建策略表单');
        return;
      }
      
      console.log('=== 输入框测试开始 ===');
      console.log('策略名称输入框:', nameInput);
      console.log('交易符号输入框:', symbolInput);
      
      // 检查输入框状态
      console.log('输入框状态检查:');
      console.log('策略名称 - disabled:', nameInput.disabled, 'readOnly:', nameInput.readOnly);
      console.log('交易符号 - disabled:', symbolInput.disabled, 'readOnly:', symbolInput.readOnly);
      
      // 强制设置可编辑状态
      nameInput.disabled = false;
      nameInput.readOnly = false;
      symbolInput.disabled = false;
      symbolInput.readOnly = false;
      
      // 强制设置样式
      nameInput.style.backgroundColor = 'white';
      nameInput.style.color = '#1f2937';
      nameInput.style.cursor = 'text';
      nameInput.style.pointerEvents = 'auto';
      nameInput.style.userSelect = 'text';
      
      symbolInput.style.backgroundColor = 'white';
      symbolInput.style.color = '#1f2937';
      symbolInput.style.cursor = 'text';
      symbolInput.style.pointerEvents = 'auto';
      symbolInput.style.userSelect = 'text';
      
      // 测试设置值
      nameInput.value = '测试策略';
      symbolInput.value = 'BTC-USDT';
      
      console.log('设置值后:');
      console.log('策略名称:', nameInput.value);
      console.log('交易符号:', symbolInput.value);
      
      // 测试焦点
      nameInput.focus();
      nameInput.select();
      
      console.log('=== 测试完成 ===');
      console.log('如果输入框可以工作，您应该能看到:');
      console.log('1. 输入框有白色背景');
      console.log('2. 文字是黑色的');
      console.log('3. 鼠标悬停时显示文本光标');
      console.log('4. 可以点击并输入文字');
      
      return {
        nameInput: nameInput,
        symbolInput: symbolInput,
        nameValue: nameInput.value,
        symbolValue: symbolInput.value,
        canEdit: !nameInput.disabled && !nameInput.readOnly
      };
    };
    
    // 添加模态框事件处理
    document.addEventListener('DOMContentLoaded', function() {
      var modal = document.getElementById('strategy-form-modal');
      var backdrop = document.getElementById('strategy-form-backdrop');
      var closeBtn = document.getElementById('strategy-form-close-btn');
      
      if (backdrop) {
        backdrop.onclick = function(e) {
          if (e.target === backdrop) {
            closeStrategyForm();
          }
        };
      }
      
      if (closeBtn) {
        closeBtn.onclick = function() {
          closeStrategyForm();
        };
      }
    });
  </script>
</body>
</html>
